﻿import { Component, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Toast } from '@ionic-native/toast';

import { ServerHttp, PageInfo } from '../../providers/server-http/server-http';
/**
 * Generated class for the VideoPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
    selector: 'page-video',
    templateUrl: 'video.html',
})
export class VideoPage {

    private videos: string[] = [
        "http://res.cycould.com/media/63d97be2bb424ab19266fd2f919f198d/video-ld.mp4",
        "http://res.cycould.com/media/1dcfd16e4d71484f97876c908feacea7/video-ld.mp4",
        "http://res.cycould.com/media/0e4e975f27c24114b7384b7c0ed906d0/video-ld.mp4",
        "http://res.cycould.com/media/ac25ce12d5c14cb2bc4b7fd0de8500eb/video-ld.mp4",
        "http://res.cycould.com/media/63349564d1fc4403a6aa1882397ca70c/video-ld.mp4",
        "http://res.cycould.com/media/85aeb57ed3ec4844bf0d59d16f69c671/video-ld.mp4",
        "http://res.cycould.com/media/9468e807308f40d9973f2310adccac0f/video-ld.mp4",
        "http://res.cycould.com/media/16a3c963c6664b539cb707c4c1f1f671/video-ld.mp4",
        "http://res.cycould.com/media/30f31daff7634035bc4147874a03b366/video-ld.mp4",
        "http://res.cycould.com/media/89c61f9b3c13468ba5c4e68703de02cf/video-ld.mp4",
        "http://res.cycould.com/media/060c41d88ff14f8e8a5539cffd98aab5/video-ld.mp4",
        "http://res.cycould.com/media/a1fbf4df8a7a47aba0e1e87c501f53f6/video-ld.mp4",
        "http://res.cycould.com/media/c44fe4355f5a4979bfcb71dd907dcfa2/video-ld.mp4",
        "http://res.cycould.com/media/e199ea4a38a147989e072893d45dbbde/video-ld.mp4",
        "http://res.cycould.com/media/39e8d6560e294fecad6f1f71e4d4aef2/video-ld.mp4",
        "http://res.cycould.com/media/0e1db848ec624e56b0b75622c919de2a/video-ld.mp4",
        "http://res.cycould.com/media/b02dc7971572426e9928c96d419ec6d1/video-ld.mp4",
        "http://res.cycould.com/media/e6d52e1d20354e61937d85a2205a97f2/video-ld.mp4",
        "http://res.cycould.com/media/86084bdbe541476dbded95e2581cd6f2/video-ld.mp4",
        "http://res.cycould.com/media/92abb2db8fb74a5eacd5fd943a46ea8c/video-ld.mp4",
        "http://res.cycould.com/media/339c9301fcfb4566a84f62fbaf93b214/video-ld.mp4",
        "http://res.cycould.com/media/3832cb3ccf444ce4b0a9e0f6c1d1f273/video-ld.mp4",
        "http://res.cycould.com/media/f177dfa2ac9645e78dd4962d59808c19/video-ld.mp4",
        "http://res.cycould.com/media/1fffeea0d0414d04970ce216faf4ea07/video-ld.mp4",
        "http://res.cycould.com/media/0d55c0ba81914376a98d34435d03bf45/video-ld.mp4",
        "http://res.cycould.com/media/77f14cef61424fd5a6592dcbb0dec967/video-ld.mp4",
        "http://res.cycould.com/media/9f8564abb60249159f62b0168b98230b/video-ld.mp4",
        "http://res.cycould.com/media/7bc36d5ff5144ef3bd7aa4b717c7cdb5/video-ld.mp4",
        "http://res.cycould.com/media/71a10832569f4b8c9c0f9bb7c869f565/video-ld.mp4",
        "http://res.cycould.com/media/f03bd197b492432a852b9add32ded9c3/video-ld.mp4",
        "http://res.cycould.com/media/bd4b877fb08a4527a1a2cb37de8e643d/video-ld.mp4",
        "http://res.cycould.com/media/9c8b33bda98d4022915c80a44bb96c6f/video-ld.mp4",
        "http://res.cycould.com/media/c0d4fcb9e06745c1b008d86fd400b041/video-ld.mp4",
        "http://res.cycould.com/media/ca3f83041aa346baa7a736dca50e8962/video-ld.mp4"
    ];

    private index: number = 0;

    @ViewChild('video')
    private video: ElementRef;

    get src(): string {
        return this.videos[this.index];
    }

    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad VideoPage');

        this.video.nativeElement.addEventListener('progress', (event) => {
            console.log(event);
        });
        this.video.nativeElement.addEventListener('canplay', (event) => {
            console.log(event);
        });
        this.video.nativeElement.addEventListener('play', (event) => {
            console.log(event);
        });
        this.video.nativeElement.addEventListener('pause', (event) => {
            console.log(event);
        });
        this.video.nativeElement.addEventListener('error', (event) => {
            console.log(event);
        });
    }

    next() {
        if (this.index < this.videos.length) {
            this.index++;
        } else {
            this.index = 0;
        }
        // 开始播放
        this.video.nativeElement.play();
    }

    prev() {
        if (this.index <= 0) {
            this.index = (this.videos.length - 1);
        } else {
            this.index--;
        }
        // 开始播放
        this.video.nativeElement.play();
    }

    playPause() {
        let element: any = this.video.nativeElement;

        if (element.paused) {
            element.play();
        } else {
            element.pause();
        }
    }
}
